<template>
  <el-dialog 
    :model-value="modelValue" 
    :title="roleName + '成员'"
    :before-close="onClose"
  >
    <el-collapse accordion v-show="roleMemberlist.length">
      <el-collapse-item 
        v-for="item in roleMemberlist"
        :key="item.id"
        :title="item.userName" 
      >
        <div>创建时间：{{item.gmtCreate}}</div>
        <div>父级角色：{{item.roleName}}</div>
        <div>是否禁用：{{item.isEnable === 1 ? '否' : '是'}}</div>
      </el-collapse-item>
    </el-collapse>

    <ComEmpty v-show="!roleMemberlist.length" />
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {getSingleRoleMembers} from '@/service/permission'

// eslint-disable-next-line
const emits = defineEmits(['update:modelValue'])
// eslint-disable-next-line
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleName: {
    type: String,
    required: true,
  }
})

const roleMemberlist = ref([])

watch(() => props.modelValue, async () => {
  const {flag, data} = await getSingleRoleMembers(props.roleName)
  if (flag) roleMemberlist.value = data
})

function onClose() {
  emits('update:modelValue', false)
}
</script>
